<template>
	<view class="padding-sm" v-if="goods && goods.length>0">
		<view class="bg-white group-view">
			<view class="flex justify-between group-view-top">
				<view>
					<text class="view-title">超值拼团</text>
					<text class="view-sub-title">拼着买更便宜</text>
				</view>
				<view>
					<text @tap="_toGroupGoodsList" class="view-title-more">更多 ></text>
				</view>
			</view>
			<view class="group-goods">
				<view v-for="(item,index) in goods" :key="index" class="group-item" @click="_toGroupGoods(item)">
					<view>
						<image :src="item.coverPhoto || noPic"></image>
					</view>
					<view class="name">{{ item.prodName }}</view>
					<view class="price">
						<view class="group-price">
							<text class="unit">￥</text>{{item.groupPrice}}
						</view>
						<view class="normal-price">
							<text>￥{{item.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryGroupGoods
	} from '../../api/goods/goodsApi.js';
	import conf from '@/conf/config.js';
	export default {
		name: "groupView",
		data() {
			return {
				goods: [],
				shopId: '',
				noPic:conf.commonBaseUrl+'h5/static/noPic.png'
			};
		},
		created() {
			
		},
		methods: {
			initGroup:function(_shopId){
				this.shopId = _shopId;
				this._loadGoods();
			},
			_toGroupGoodsList: function() {
				uni.navigateTo({
					url: '/pages/goods/groupGoodsList?shopId='
				})
			},
			_loadGoods: function() {
				let _that = this;
				queryGroupGoods({
					page: 1,
					row: 4,
					shopId: this.shopId
				}).then(_data => {
					_that.goods = _data
				})
			},
			_toGroupGoods: function(_product) {
				uni.navigateTo({
					url: '/pages/goods/groupGoods?productId=' + _product.productId + "&groupId=" + _product
						.groupId + "&shopId=" + _product.shopId
				})
			}
		}
	}
</script>

<style lang="scss">
	.group-view {
		border-radius: 10upx;
		padding: 20upx;

		.view-title {
			font-size: 36upx;
			color: #444;
		}

		.view-sub-title {
			font-size: 24rpx;
			margin-left: 20rpx;
			color: #FA2E1B;
		}

		.view-title-more {
			font-size: 24rpx;
			color: #777;
			line-height: 48upx;
		}

		.group-goods {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20upx;

			.group-item {
				margin: 0 8rpx;
				.name {
					font-size: 24rpx;
					margin-top: 5rpx;
				}
				image {
					width: 153rpx;
					height: 160rpx;
					border-radius: 15rpx;
				}
			}
			.price {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				.group-price {
					color: #FA2E1B;
					margin-top: 10rpx;
					.unit {
						font-size: 20rpx;
					}
				}
				.normal-price {
					color: #909399;
					font-size: 20rpx;
					text-decoration: line-through;
				}
			}
			
		}
	}
</style>
